<template>
  <div>
    <Header :isGoBack="false">
      <template v-slot:left>
        <span style="color:#fff">单词速记王 <i class="el-icon-arrow-right"></i> 学习中心</span>
        <el-tooltip effect="dark" content="不了解学习中心，点击查看新手引导" placement="right">
          <img @click="startSteps" class="ml20 click tips" src="@/assets/img/icon/help-big.png" alt="" />
        </el-tooltip>
      </template>
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <div class="study-center w1200">
      <div class="class-name flex-space-be">
        <div class="mr50 pl20" id="step1">
          <span class="book-name mr30">
            {{
              checkedBookData.edition_name + "-" + checkedBookData.grade_name
            }}
          </span>
          <el-dropdown @command="checkBook">
            <span class="el-dropdown-link">
              换课程
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in classData" :key="item.book_id + '' + index" :command="item"><span
                  v-if="item.book_id != 2070 && item.book_id != 2071">
                  {{ item.edition_name }}-{{ item.grade_name }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="flex-space-be class-name-right pr20" id="step2">
          <div class="progress-box">
            <div class="progress">
              <div class="progress-text flex-space-be mb5">
                <span>
                  {{ categoryObj[modeBookSchedule[0].category] }}
                  (第{{ modeBookSchedule[0].number }}遍)进度
                </span>
                <span>
                  {{ modeBookSchedule[0].progessNum }}%({{
                    modeBookSchedule[0].studyNum
                  }}/{{ modeBookSchedule[0].totalNum }})
                </span>
                <i class="el-icon-caret-bottom"></i>
              </div>
              <div>
                <el-progress :percentage="modeBookSchedule[0].progessNum" status="success"
                  :show-text="false"></el-progress>
              </div>
              <div class="progress-absolute">
                <div class="class-schedule">
                  <ul>
                    <li v-for="item in modeBookSchedule" :key="item.category">
                      <span class="mr20">
                        智能{{ categoryObj[item.category] }}
                        <span class="info-number">(第{{ item.number }}遍)</span>
                      </span>
                      <div class="progress-number">
                        <el-progress :color="$store.getters.color_main" :percentage="item.progessNum"
                          :show-text="false"></el-progress>
                        <span class="ml5 mr5"> {{ item.progessNum }}%</span>
                        <span class="info-number">
                          ({{ item.studyNum }}/{{ item.totalNum }})
                        </span>
                      </div>
                      <!-- <div
                        class="ml30 color"
                        @click="studyAgain(item.category, item.number)"
                      >
                        再学一遍
                      </div> -->
                    </li>
                  </ul>
                </div>
                <div class="progress-absolute-more" @click="goProgressCourse">
                  查看课程详细进度
                </div>
              </div>
            </div>
          </div>
          <div class="btn-box">
            <el-button @click="goTestCenter" class="button button-bg-primary">
              测试中心
            </el-button>
          </div>
        </div>
      </div>
      <div class="study-conatiner flex-space-be">
        <div class="intelligent-study study-item mr20" id="step4" v-loading="getUnitLoading">
          <div class="intelligent-study-header study-item-header flex-space-be">
            <span>智能学习区</span>
            <span>
              <i class="header-right el-icon-reading"></i>
              <span class="header-right click" @click="goWordBook('first')">
                单词本</span>
            </span>
          </div>

          <div class="intelligent-study-container flex-space-be">
            <div class="
                intelligent-study-left
                mr20
                study-cotainer
                intelligent-study-item
              " id="step5">
              <div class="intelligent-study-unit">
                <div class="
                    study-cotainer-title
                    intelligent-item-header
                    flex-space-be
                  ">
                  <span class="title">单元</span>
                  <el-popover placement="bottom-start" trigger="hover">
                    <div class="study-schedule-info">
                      <p>
                        打开进度后，单元名称后面的图标便是各个模块的学习状态，如图所示：
                      </p>
                      <p class="study-schedule">
                        <span class="schedule-icon study-nolearn"></span>
                        <span class="schedule-text ml5 mr10">未学</span>
                        <span class="schedule-icon study-learning my_progress">
                          <el-progress :show-text="false" type="circle" :percentage="66" :width="12" :height="12"
                            :stroke-width="2" :color="$store.getters.color_main"></el-progress>
                        </span>
                        <span class="schedule-text ml5 mr10">正在学</span>
                        <span class="schedule-icon study-quick"></span>
                        <span class="schedule-text ml5 mr10">极速挑战</span>
                        <span class="schedule-icon study-pass"></span>
                        <span class="schedule-text ml5 mr10">通过</span>
                        <span class="schedule-icon study-nopass"></span>
                        <span class="schedule-text ml5 mr10">未通过</span>
                        <span class="schedule-icon study-ultimate"></span>
                        <span class="schedule-text ml5 mr10">终极挑战</span>
                      </p>
                    </div>
                    <img slot="reference" src="@/assets/img/icon/help-normal.png" alt="" />
                  </el-popover>
                </div>
                <div class="study-unit">
                  <div class="scorll-box">
                    <ul class="study-unit-list">
                      <li v-for="unit in unitList" :key="unit.unit_id" :class="checkedUnit == unit.unit_id ? 'checked-unit' : ''
                        " @click="checkUnit(unit)">
                        <el-tooltip effect="dark" :content="unit.unit_name" placement="top"
                          :disabled="unit.unit_name.length <= 9" :open-delay="500">
                          <h5>
                            {{ unit.unit_name }}
                          </h5>
                        </el-tooltip>
                        <div class="study-schedule">
                          <span v-for="unitStatus in unit.word_total_vo_list" :key="unitStatus.category"
                            class="schedule-icon my_progress" :class="statusClass[unitStatus.status]">
                            <el-progress v-if="unitStatus.status == 1" :show-text="false" type="circle" :percentage="75"
                              :color="$store.getters.color_main" :width="12" :height="12"
                              :stroke-width="2"></el-progress></span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="
                intelligent-study-right
                study-cotainer
                intelligent-study-item
              " id="step6">
              <div class="study-cotainer-title intelligent-item-header">
                <span>
                  <span> 模块选择 </span>
                  <img class="ml20 click" @click="dialogModeInfo = true" slot="reference"
                    src="@/assets/img/icon/help-normal.png" alt="" />
                </span>
                <span class="fr header-right mr15 click btn" @click="goWordBook('third')" v-show="false">
                  发音训练
                </span>
                <span v-if="!$store.getters.isTeacher" @click="checkTypeDialog = true" class="fr mr15 click btn">
                  单元测试
                </span>
                <span v-if="isUlimateChalenge && !$store.getters.isTeacher" @click="goTestChal" class="fr mr15 click btn">
                  终极挑战
                </span>
              </div>
              <div class="intelligent-right-conatin">
                <div class="word-study">
                  <div class="word-study-item" v-for="(modeData, index) in unitModeData" :key="modeData.category"
                    :id="modeData.category == 0 ? 'step7' : ''">
                    <div class="icon-caret" v-if="index > 0">
                      <img src="@/assets/img/icon/icon-caret-right.png" alt="" />
                    </div>
                    <div class="study-item" :class="[
                      modeData.progressNum >= 100 || modeData.status >= 2
                        ? 'study-border'
                        : '',
                      index == 0 ? 'big-study-item' : 0,
                      $store.getters.isTeacher ? 'not-click' : 'click',
                    ]" @click="goRoute(modeData)">
                      <div class="study-item-progress">
                        <div
                          v-if="modeData.status == 2 || modeData.status == 5"
                          class="challenge challenge-quick"
                          :class="[
                            modeData.status == 2 ? 'challenge-quick' : '',
                            modeData.status == 5 ? 'challenge-ultimate' : '',
                          ]"
                          :style="
                            index == 0
                              ? 'width: 120px; height: 120px'
                              : 'width: 80px; height: 80px'
                          "
                        >
                          <!-- <span
                            style="color: #1472ff;display:inline-block;padding-top:80px"
                            >总数: {{ modeData.studyNum }}</span
                          > -->
                        </div>
                        <el-progress v-else :width="index == 0 ? 120 : 80" :height="index == 0 ? 120 : 80" type="circle"
                          style="white-space: pre;" :percentage="modeData.progressNum" :color="modeData.status > 2 &&
                            (modeData.nearScore || modeData.nearScore == 0) &&
                            modeData.nearScore < 85
                            ? '#F9413A'
                            : $store.getters.color_main
                            " :class="[
    modeData.status > 2 &&
      (modeData.nearScore || modeData.nearScore == 0)
      ? modeData.nearScore < 85
        ? 'red-text'
        : 'green-text'
      : '',
  ]" :format="formatProgress(modeData)"></el-progress>
                      </div>
                      <div class="study-item-name">
                        {{ categoryObj[modeData.category] }}
                      </div>
                      <span v-if="index == 0 && modeData.status == 2" class="total">总数: {{ modeData.studyNum }}</span>
                      <p class="study-item-notice" v-if="modeData.reviewNum">
                        需复习：{{ modeData.reviewNum }}
                      </p>
                      <!-- && modeData.status >= 4 -->
                      <span v-if="!$store.getters.isTeacher" class="
                          click
                          orange-color-text
                          opacity-hover
                          study-item-again
                        " @click.stop="againMemoryClick(modeData.category)">
                        再学一遍
                      </span>
                    </div>
                  </div>
                </div>
                <!-- <div class="icon-caret-bottom"></div>
                <div class="example-study">
                  <div class="study-item big-study-item">
                    <h5>例句听组</h5>
                    <p>0/30</p>
                  </div>
                  <div class="icon-caret">
                    <img
                      src="../../assets/img/icon/icon-caret-right.png"
                      alt=""
                    />
                  </div>
                  <div class="study-item">
                    <h5>例句听力</h5>
                    <p>0/30</p>
                  </div>
                  <div class="icon-caret">
                    <img
                      src="../../assets/img/icon/icon-caret-right.png"
                      alt=""
                    />
                  </div>
                  <div class="study-item">
                    <h5>例句翻译</h5>
                    <p>0/30</p>
                  </div>
                  <div class="icon-caret">
                    <img
                      src="../../assets/img/icon/icon-caret-right.png"
                      alt=""
                    />
                  </div>
                  <div class="study-item">
                    <h5>例句默写</h5>
                    <p>0/30</p>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="intelligent-review study-item" id="step3">
          <div class="study-item-header">
            <span>智能复习区</span>
          </div>
          <div class="intelligent-review-container">
            <div class="intelligent-review-once">
              <el-button :disabled="$store.getters.isTeacher" class="button button-bg-second" @click="goReview()">
                一键智能复习
              </el-button>
            </div>
            <ul v-if="$store.getters.isTeacher">
              <li v-for="item in reviewData" :key="item.category" :class="item.num > 10 ? 'checked-item' : ''">
                智能{{ categoryObj[item.category] }} ( {{ item.num }} )
              </li>
            </ul>
            <ul v-else>
              <li v-for="item in reviewData" :key="item.category" @click="goReview(item)" class="click"
                :class="item.num > 10 ? 'checked-item' : ''">
                智能{{ categoryObj[item.category] }} ( {{ item.num }} )
              </li>
            </ul>
          </div>
          <div class="btn-box">
            <el-button class="button button-bg-primary" @click="goMemoryReview">
              记忆追踪
            </el-button>
          </div>
        </div>
      </div>
      <el-dialog title="模块说明" :visible.sync="dialogModeInfo">
        <div>
          <div class="mode-item">
            <h4>
              <span class="number">1</span>
              <span class="title">智能记忆</span>
              <el-rate disabled :value="1"></el-rate>
            </h4>
            <p>
              重点训练看词能认的能力。辅助训练单词读音和拼写。记忆引擎驱动能实现40小时记3000生词，词汇学习从此无忧！
            </p>
          </div>
          <div class="mode-item">
            <h4>
              <span class="number">2</span>
              <span class="title">智能词听</span>
              <el-rate disabled :value="2"></el-rate>
            </h4>
            <p>训练听读音懂词义的能力，能快速打牢听力基础，攻破听力难题。</p>
          </div>
          <div class="mode-item">
            <h4>
              <span class="number">3</span>
              <span class="title">智能听写</span>
              <el-rate disabled :value="3"></el-rate>
            </h4>
            <p>
              训练听读音写单词的能力，具有错误精准识别和错误矫正功能，拼音音节让单词拼写更好记。
            </p>
          </div>
          <div class="mode-item">
            <h4>
              <span class="number">4</span>
              <span class="title">智能默写</span>
              <el-rate disabled :value="4"></el-rate>
            </h4>
            <p>
              训练看词义写单词的能力，是词汇学习中难度最高的模块。智能化学习流程保证达到牢固记忆的效果。
            </p>
          </div>
        </div>
      </el-dialog>
    </div>
    <el-dialog title="提示" :visible.sync="checkTypeDialog" @close="questionType = []"
      :width="`${this.checkedBookData.book_id !== 600 ? 600 : 420}px`" center class="question-type">
      <div>
        <el-form v-if="this.checkedBookData.book_id !== 600">
          <el-form-item label="选择题型">
            <el-checkbox-group v-model="questionType">
              <el-checkbox-button :label="1">英译汉</el-checkbox-button>
              <el-checkbox-button :label="2">汉译英</el-checkbox-button>
              <el-checkbox-button :label="3">听力理解</el-checkbox-button>
              <el-checkbox-button :label="4">听写</el-checkbox-button>
              <el-checkbox-button :label="5">默写</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div v-else class="text-center">进入测试</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button button-border-primary" @click="goUnitList('generalTest')">普通模式</el-button>
        <el-button class="button button-bg-primary" @click="goUnitList('quickTest')">
          极速模式
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Header from "@/components/Header";
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import steps from "@/utils/steps"; //用来存放引导的步骤
import EventBus from "@/assets/js/eventBus";
import { mapGetters } from "vuex";
import {
  getUnitList,
  getClassData,
  getReviewNumber,
  studyAgain,
  postStudyAgain,
  getIsForce,
  get_isSkipSpeedChallenge_E
} from "@/api/index";
import { userInfo } from "os";
/**
 *  typeObj: {
      0: "记忆",
      1: "英译汉",
      2: "汉译英",
      3: "听力理解",
      4: "听写",
      5: "默写",
    },
 */
export default {
  data() {
    return {
      driver: null,
      checkedUnit: null,
      dialogModeInfo: false,
      // 单元中的数据
      unitList: [],
      statusClass: {
        0: "study-nolearn",
        1: "study-learning",
        2: "study-quick",
        3: "study-nopass",
        4: "study-pass",
        5: "study-ultimate",
      },
      checkedBookData: {},
      classData: [],
      categoryObj: {
        0: "记忆",
        1: "词听",
        2: "听写",
        3: "默写",
      },
      categoryRoute: {
        0: "memory",
        1: "wordListen",
        2: "dictation",
        3: "writeMemory",
      },
      // 一键智能复习需要复习的数量 - reviewData只存大于0的数
      /*
    "data": [
       {
           "category": 0,  // 记忆
           "num": 0   // 复习的数量
       },
       {
           "category": 1,  // 词听
           "num": 3
       },
       {
           "category": 2,  // 听写
           "num": 0
       },
       {
           "category": 3,  // 默写
           "num": 0
       }
   ]
   */
      reviewData: [],
      checkTypeDialog: false,
      questionType: [],
      getUnitLoading: false,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    // 返回记忆，听写，词听等的数据，里面包括需要复习的
    unitModeData() {
      let unit = this.unitList.filter((item) => {
        return item.unit_id == this.checkedUnit;
      });
      if (unit && unit.length <= 0) return [];
      console.log(unit[0].unitData, "unit[0].unitData");
      return unit[0].unitData;
    },
    isUlimateChalenge() {
      if (!this.unitModeData || this.unitModeData.length == 0) {
        return false;
      }
      return this.unitModeData.every((item) => {
        return item.status >= 4;
      });
    },
    modeBookSchedule() {
      let data = [];
      if (this.checkedBookData.word_book_vo_list.length > 0) {
        let totalNum = this.checkedBookData.word_book_vo_list[0].total_number;
        for (let i = 0; i < 4; i++) {
          let indexData = this.checkedBookData.word_book_vo_list.findIndex(
            (item) => {
              return item.source == i;
            }
          );
          if (indexData > -1) {
            data.push({
              totalNum,
              studyNum: this.checkedBookData.word_book_vo_list[indexData]
                .study_number,
              category: i,
              number: this.checkedBookData.word_book_vo_list[indexData].number,
            });
          } else {
            data.push({
              totalNum,
              studyNum: 0,
              category: i,
              number: this.checkedBookData.word_book_vo_list[0].number,
            });
          }
        }
      }
      data.forEach((item) => {
        item.progessNum = parseInt((item.studyNum / item.totalNum) * 100);
      });
      data.sort((a, b) => {
        return a.category - b.category;
      });
      return data;
    },
  },
  methods: {
    async getIsForce() {
      // 更换 - 为教师端配置的值进行提示
      /* 2024/03/21 */
      // 获取老师端配置的记忆和词听等是否强制进入复习
      var classId = Number(this.checkedBookData.id);
      var Econfigs = await get_isSkipSpeedChallenge_E({classId});
      try {
       Econfigs = Econfigs.data;
        var icons = {
          "is_skip_review":0,
          "is_skip_word_listen":1,
          "is_skip_listen_write":2,
          "is_skip_dictation":3
        };
        var s = false, category=0, configs, memoryData;
        for (var v in Econfigs){
          if(icons[v] >= 0){
          console.log(Econfigs[v],"Econfigs");
          configs = Econfigs[v];  // 0直接进入  1提示进入  2不进入
          if (configs != 2) {
            console.log(this.reviewData, "this.reviewData");
            for (var vv of this.reviewData){
              console.log(icons[v] == vv['category'],vv['category'],vv['num']);
              if (icons[v] == vv['category'] && vv['num']>0) {
                s = true;
                memoryData = vv;
                category = vv['category'];
                break;
              }
            }
            if (s) break;
          }
          }
        }
        if (s) {
          if(configs == 1){
          var text = "";
          switch(Number(category)){
            case 0:
              text = "记忆复习";
              break;
            case 1:
              text = "词听复习";
              break;
            case 2:
              text = "听写复习";
              break;
            case 3:
              text = "默写复习";
              break;
          }
          this.$confirm("今天的"+text+"还没有完成哦，请先完成复习", "提示", {
            confirmButtonText: "前往复习",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showClose: false,
          })
            .then(() => {
              console.log(memoryData)
              this.goReview(memoryData, 1);
            })
            .catch(() => {
              // this.goStudyIndex();
            });
          }else{  // 直接进入
        this.goReview(memoryData, 1);
       }
       }
        
      } catch (e) {
        this.$message.error('获取一键智能复习配置异常!');
      }

      /* 原版 */
      /*
      getIsForce(this.checkedBookData.book_id).then((res) => {
        if (res.code == 200 && res.data) {
          let memoryData = {
            category: 0,
            num: 1,
          };
          this.$confirm("今天的记忆复习还没有完成哦，请先完成复习", "提示", {
            confirmButtonText: "前往复习",
            cancelButtonText: "退出",
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showClose: false,
          })
            .then(() => {
              this.goReview(memoryData, 1);
            })
            .catch(() => {
              this.goStudyIndex();
            });
        }
      });
      */

    },
    againMemoryClick(source) {
      this.$confirm(
        `再学一遍会将此模块的进度重置，请确认是否再学一遍`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          showClose: true,
          distinguishCancelAndClose: true,
        }
      )
        .then(() => {
          let data = {
            bookId: this.checkedBookData.book_id,
            unitId: this.checkedUnit,
            source,
          };
          postStudyAgain(data).then((res) => {
            if (res.code == 200) {
              this.$alert("重置进度成功", "提示");
              this.getClassData();
            }
          });
        })
        .catch(() => { });
    },
    // 一键智能复习数量获取 
    /*
     "data": [
        {
            "category": 0,  // 记忆
            "num": 0   // 复习的数量
        },
        {
            "category": 1,  // 词听
            "num": 3
        },
        {
            "category": 2,  // 听写
            "num": 0
        },
        {
            "category": 3,  // 默写
            "num": 0
        }
    ]
    */
    getReviewNumber() {
      getReviewNumber(this.checkedBookData.book_id).then((res) => {
        if (res.code == 200 && res.data) {
          this.reviewData = res.data.filter((item) => {
            return item.num > 0;
          });

          if (!this.$store.getters.isTeacher) {
        this.getIsForce();
      }
          return
        }
      });
    },

    goUnitList(route) {
      this.$router.push({
        name: route,
        query: {
          unitId: this.checkedUnit,
          category: 24,
          questionType:
            this.questionType.length > 0
              ? this.questionType.join(",")
              : [1, 2, 3, 4, 5].join(","),
        },
      });
    },
    // 换课程
    async checkBook(data) {
      if (
        this.checkedBookData &&
        data.book_id != this.checkedBookData.book_id
      ) {
        await this.$store.dispatch("SetTimeEnglish", 1);
      }
      this.checkedBookData = data;
      localStorage.setItem("bookData", JSON.stringify(this.checkedBookData));
      this.getUnitList();
      this.getReviewNumber();
      
    },
    getUnitList() {
      let params = {
        bookId: this.checkedBookData.book_id,
      };
      this.getUnitLoading = true;
      getUnitList(params)
        .then((res) => {
          this.getUnitLoading = false;
          if (res.code == 200 && res.data) {
            res.data.forEach((item) => {
              item.word_total_vo_list.sort((a, b) => {
                return a.category - b.category;
              });
              let data = [];
              for (let i = 0; i < 4; i++) {
                let scoreData = item.category_vo_list.filter((item) => {
                  return item.category == i;
                });
                let reviewData = item.unit_vo_list.filter((item) => {
                  return item.category == i;
                });
                let studyData = item.total_vo_list.filter((item) => {
                  return item.category == i;
                });
                let sumData = item.word_total_vo_list.filter((item) => {
                  return item.category == i;
                });
                let objData = {
                  category: i,
                  studyNum: studyData.length > 0 ? studyData[0].number : 0,
                  totalNum: sumData.length > 0 ? sumData[0].word_sum : 0,
                  status: sumData.length > 0 ? sumData[0].status : 0,
                  reviewNum:
                    reviewData.length > 0 ? reviewData[0].study_number : 0,
                  nearScore: scoreData.length > 0 ? scoreData[0].score : null,
                };
                objData.progressNum =
                  objData.totalNum <= 0
                    ? 0
                    : objData.studyNum / objData.totalNum > 1
                      ? 100
                      : (objData.studyNum / objData.totalNum) * 100;
                data.push(objData);
              }
              data.sort((a, b) => {
                return a.category - b.category;
              });
              item.unitData = data;
            });
            this.unitList = res.data;
            let index = this.unitList.findIndex((item) => {
              return item.unit_id == this.checkedUnit;
            });
            if (index == -1 && res.data.length > 0) {
              // this.checkedUnit = res.data[0].unit_id;
              this.checkUnit(res.data[0]);
            }
          }
        })
        .catch(() => {
          this.getUnitLoading = false;
        });
    },
    goRoute(data) {
      console.log(data, 15115);
      if (this.$store.getters.isTeacher) {
        return;
      }
      let categoryObj = {
        0: "memory",
        1: "wordListen",
        2: "dictation",
        3: "writeMemory",
      };
      let categoryObj1 = {
        0: "智能记忆",
        1: "智能词听",
        2: "智能听写",
        3: "智能默写",
      };
      if (data.status > 1) {
        this.$confirm(
          `${categoryObj1[data.category]}学习已完成,前往极速挑战`,
          "提示",
          {
            confirmButtonText: "极速模式",
            cancelButtonText: "普通模式",
            showClose: true,
            distinguishCancelAndClose: true,
          }
        )
          .then(() => {
            this.$router.push({
              name: "quickTest",
              query: {
                unitId: this.checkedUnit,
                category: data.category,
              },
            });
          })
          .catch((type) => {
            if (type != "close") {
              this.$router.push({
                name: "generalTest",
                query: {
                  unitId: this.checkedUnit,
                  category: data.category,
                },
              });
            }
          });
      } else {
        this.$router.push({
          name: categoryObj[data.category],
          query: {
            unitId: this.checkedUnit,
          },
        });
      }
    },
    goTestChal() {
      this.$confirm(`前往终极挑战`, "提示", {
        confirmButtonText: "极速模式",
        cancelButtonText: "普通模式",
        showClose: true,
        distinguishCancelAndClose: true,
        beforeClose: this.$beforeConfirmClose,
      })
        .then(() => {
          this.$router.push({
            name: "quickTest",
            query: {
              unitId: this.checkedUnit,
              category: 5,
            },
          });
        })
        .catch((type) => {
          if (type != "close") {
            this.$router.push({
              name: "generalTest",
              query: {
                unitId: this.checkedUnit,
                category: 5,
              },
            });
          }
        });
    },
    goTestCenter() {
      this.$router.push({
        name: "testCenter",
      });
    },
    goWordBook(tab) {
      this.$router.push({
        name: "wordBook",
        query: {
          tab,
        },
      });
    },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    goMemoryReview() {
      this.$router.push({
        name: "memoryReview",
      });
    },
    goProgressCourse() {
      this.$router.push({
        name: "progressCourse",
      });
    },
    formatProgress(data) {
      return function () {
        if (data.status > 2 && (data.nearScore || data.nearScore == 0)) {
          return data.nearScore + "分" + "\n" + "总数: " + data.studyNum;
        } else if (data.totalNum) {
          return "" + data.studyNum + "/" + data.totalNum;
        } else {
          return "0 / 0";
        }
      };
    },
    startSteps() {
      this.$nextTick(() => {
        this.driver = new Driver({
          allowClose: false,
          doneBtnText: "完成", //结束按钮的文字
          stageBackground: "#ffffff", //突出显示元素的背景颜色
          nextBtnText: "我知道了", //下一步按钮的文字
          prevBtnText: "上一步", //上一步按钮的文字
          closeBtnText: "关闭", //关闭按钮的文字
          // onHighlightStarted: (Element) => {
          //   console.log(Element);
          // }, //元素即将突出显示时调用
          // onHighlighted: (Element) => {
          //   console.log(Element);
          // }, //元素完全突出显示时调用
          // onDeselected: (Element) => {
          //   console.log(Element);
          // }, //取消选择元素时调用
          // onReset: (Element) => {
          //   console.log(Element);
          // }, //当要清除叠加时调用
          // onNext: (Element) => {
          //   console.log(Element);
          // }, //在任何步骤中移动到下一步时调用
          // onPrevious: (Element) => {
          //   console.log(Element);
          // }, //在任何步骤中移动到上一步时调用
        });
        this.driver.defineSteps(steps);
        this.driver.start();
      });
    },
    goReview(data, isForce) {
      if (data) {
        if (data.num > 0) {
          this.$router.push({
            name: this.categoryRoute[data.category],
            query: {
              isReview: true,
              isForce,
            },
          });
        }
      } else {
        let filterData = this.reviewData.filter((item) => {
          return item.num > 0;
        });
        if (filterData.length > 0) {
          this.$router.push({
            name: this.categoryRoute[filterData[0].category],
            query: {
              isReview: true,
            },
          });
        } else {
          this.$alert("暂无可以复习的单词", "提示");
        }
      }
    },
    getClassData() {
      EventBus.$emit("openLoading", {});
      getClassData()
        .then((res) => {
          EventBus.$emit("closeLoading", {});
          if (res.code == 200 && res.data) {
            res.data = res.data.filter((item) => {
              return item.status == 0;
            });
            this.classData = res.data;
            console.log("asdasda---:", this.classData)
            if (this.classData) {
              let index = this.classData.findIndex((item) => {
                return item.book_id == this.checkedBookData.book_id;
              });
              if (index == -1) {
                this.goStudyIndex();
              } else {
                this.checkBook(this.classData[index]);
              }
            }
          }
        })
        .catch(() => {
          EventBus.$emit("closeLoading", {});
        });
    },

    checkUnit(data) {
      this.checkedUnit = data.unit_id;
      localStorage.setItem("checkedUnit", JSON.stringify(data));
    },
    studyAgain(source, number) {
      let isAgain = this.unitList.every((item) => {
        let data = item.word_total_vo_list.filter((status) => {
          return status.category == source;
        });
        return data && data[0].status == 5;
      });
      if (isAgain) {
        this.$confirm(
          `再学一遍会将此模块的所有进度重置，请确认是否再学一遍`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            showClose: true,
            distinguishCancelAndClose: true,
          }
        )
          .then(() => {
            let params = {
              bookId: this.checkedBookData.book_id,
              number,
              source,
            };
            studyAgain(params).then((res) => {
              if (res.code == 200) {
                this.getClassData();
                this.$alert("重置进度成功", "提示");
              }
            });
          })
          .catch(() => { });
      } else {
        this.$alert("请本模块的所有单元通过终极挑战再试", "提示");
      }
    },
  },
  created() {
    this.checkedUnit = localStorage.getItem("checkedUnit")
      ? JSON.parse(localStorage.getItem("checkedUnit")).unit_id
      : null;
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getClassData();
  },
  beforeDestroy() {
    if (this.driver) {
      this.driver.reset();
    }
  },
  mounted() { },
  components: { Header },
  watch: {},
};
</script>
<style lang="scss" scoped>
.tips {
  width: 20px;
  height: 20px;
}

.header-right {
  font-size: 16px;
}

.el-icon-reading {
  font-size: 18px;
}

/deep/ el-progress__text {
  line-height: 20px;
}

.total {
  color: #6b6b6b;
  position: absolute;
  top: 160px;
  left: 90px;
}

.study-item-progress /deep/ .el-progress-circle {
  width: 0.4166666666666667rem !important;
  height: 0.4166666666666667rem !important;
}

.big-study-item /deep/ .el-progress-circle {
  width: 0.625rem !important;
  height: 0.625rem !important;
}

.study-item-progress /deep/ .el-progress__text {
  font-size: 0.07986109375rem !important;
}

.study-schedule /deep/ .el-progress-circle {
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  position: relative;
  top: 0;

  svg {
    position: absolute;
    top: 0;
  }
}
</style>
